<script setup>
// import { ref } from 'vue'
import { Sunny, Moon } from '@element-plus/icons-vue'
import { usePageColorStore } from '@/stores'
import { computed } from 'vue'
// import { setSvgColor } from '@/utils/svg'

const pageColorStore = usePageColorStore()
const isDark = computed(() => pageColorStore.isDark)

function toggleDark() {
  pageColorStore.change()
}
</script>

<template>
  <!-- <el-switch
    v-model="isDark"
    inline-prompt
    :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
    @change="toggleDark"
    size="large"
    style="--el-switch-on-color: #272a2f; --el-switch-off-color: #409eff"
  /> -->
  <el-switch
    v-model="isDark"
    @change="toggleDark"
    style="--el-switch-on-color: #272a2f; --el-switch-off-color: #f1f1f1"
  >
    <template #active-action>
      <span
        class="custom-active-action"
        style="text-align: center; line-height: 14px"
      >
        <el-icon color="#272a2f"><Moon /></el-icon>
      </span>
    </template>
    <template #inactive-action>
      <span
        class="custom-active-action"
        style="text-align: center; line-height: 14px"
      >
        <el-icon color="#2b2c30"> <Sunny /></el-icon>
      </span>
    </template>
  </el-switch>
</template>
